<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>jindo.DropArea - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class=""><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="selected">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


	
<div class="snb depth2 scrollbar">
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<h3 class="blind">jindo.DropArea 클래스</h3>
			<div class="smanuals">
		
				<h3>보기 옵션</h3>
				<ul class="api-options">
					<li class="api-show-inherited">
						<span id="checkbox-inherited">
							<span class="checkbox-mark checkbox-checked"></span>
							<input type="checkbox" id="api-show-inherited">
						</span><label for="api-show-inherited">상속받은 항목</label>

					</li>
					<li class="api-show-deprecated">
						<span id="checkbox-deprecated">
							<span class="checkbox-mark"></span>
							<input type="checkbox" id="api-show-deprecated">
						</span><label for="api-show-deprecated">폐지예정 항목</label>
					</li>
				</ul>
	
		        
		            <h3><a href="#manual">매뉴얼</a></h3>
		
		            <ul class="manuals">
		                
		                    <li class="manual">
		                        <a href="#manual_6a586bd6ae227a6ba2d98c96e8b06af1">기능과 동작 방식</a>
		                    </li>
		                
		                    <li class="manual">
		                        <a href="#manual_cbd30bb38edc7ffc879aabd5f479a2c7">기본 초기화 형태</a>
		                    </li>
		                
		            </ul>
		        

		        
		            <h3><a href="#demo">데모</a></h3>
		        
		
		        
		            <h3><a href="#constructor">생성자</a></h3>
		
		            <ul class="constructors extends">
		                
		                    <li class="">
		                        <a href="#constructor_jindo.DropArea">
		                            DropArea
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
				
		        
		
		        
		            <h3><a href="#method">메서드</a></h3>
		
		            <ul class="methods extends">
		                
		                    <li class=" inherited-item">
		                        <a href="#method_attach" title="커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;등록한다.">
		                            attach()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_detach" title="커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.">
		                            detach()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_detachAll" title="등록된&nbsp;모든&nbsp;커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.">
		                            detachAll()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_fireEvent" title="이벤트를&nbsp;발생시킨다.">
		                            fireEvent()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getOveredLists" title="Drag되고&nbsp;있는&nbsp;채,&nbsp;마우스가&nbsp;올라간&nbsp;엘리먼트의&nbsp;리스트를&nbsp;구함">
		                            getOveredLists()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_option" title="옵션&nbsp;값을&nbsp;가져온다.">
		                            option()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_optionSetter" title="옵션의&nbsp;setter&nbsp;함수를&nbsp;가져온다.&nbsp;
옵션의&nbsp;setter&nbsp;함수는&nbsp;지정된&nbsp;옵션이&nbsp;변경되면&nbsp;수행되는&nbsp;함수이다.">
		                            optionSetter()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		            </ul>
		        
		
		        
		
		        
		            <h3><a href="#event">이벤트</a></h3>
		
		            <ul class="events extends">
		                
		                    <li class="">
		                        <a href="#event_dragEnd" title="oDragInstance의&nbsp;dragEnd&nbsp;이벤트에&nbsp;연이어&nbsp;발생">
		                            dragEnd
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_dragStart" title="oDragInstance의&nbsp;dragStart&nbsp;이벤트에&nbsp;연이어&nbsp;발생">
		                            dragStart
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_drop" title="Drop&nbsp;가능한&nbsp;엘리먼트에&nbsp;성공적으로&nbsp;드랍&nbsp;될&nbsp;경우&nbsp;발생">
		                            drop
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_move" title="Drag된&nbsp;채&nbsp;Drop&nbsp;가능한&nbsp;엘리먼트위에서&nbsp;마우스&nbsp;커서가&nbsp;움직일&nbsp;경우&nbsp;발생">
		                            move
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_out" title="Drag된&nbsp;채&nbsp;Drop&nbsp;가능한&nbsp;엘리먼트에서&nbsp;마우스&nbsp;커서가&nbsp;벗어날&nbsp;경우&nbsp;발생">
		                            out
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_over" title="Drag된&nbsp;채&nbsp;Drop&nbsp;가능한&nbsp;엘리먼트에&nbsp;마우스&nbsp;커서가&nbsp;올라갈&nbsp;경우&nbsp;발생">
		                            over
		                            
		                            
		                        </a>   
		                    </li>
		                
		            </ul>
		        
		
		        
	
			</div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>

<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				
<!-- content -->
<div class="content">
	<h1 class="blind">
		DropArea
	</h1>

	<div class="tc-panel first">
		<dl class="relation">
		<dt>클래스</dt>
		<dd>jindo.DropArea
		    
	        
			<span class="btn_code"><a href="../files/source_jindo.DropArea.js.html#l7" title="view source code"><span class="blind">소스코드</span></a></span>
		</dd>

	    
	        <dt>상속</dt>
	        <dd>
	        	<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a>
	        	
	        </dd>
	    

	    
		
	    
		<dt>사용</dt>
		<dd><a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a></dd>
		
		
	    
		
		</dl>

		
		
		<div class="description"><p>HTMLElement를 Drop할 수 있게 해주는 컴포넌트
DragArea 컴포넌트는 상위 기준 엘리먼트의 자식들 중 특정 클래스명을 가진 모든 엘리먼트에 Drag된 엘리먼트를 Drop 가능하게 한다.</p></div>
		
		

	    
	    
		<div class="qr_code">
			<strong>QR code</strong>
		
			<div id="QRView">
			<script type="text/javascript">

				document.write([
					'<img src="http://chart.apis.google.com/chart?cht=qr&chs=220x220&chl=',
					encodeURIComponent(location.href.replace(/#.*$/, '')),
					'&choe=UTF-8" />'
				].join(''));

			</script>
			</div>
		</div>	    
	    
		
	</div>

	<div class="tc-panel panel">

        
			<h2 class="noline">생성자</h2>
			
			<table class="tbl_board">
			<caption class="hide">생성자</caption>
			<colgroup>
			<col style="width:22px">
			<col />
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">생성자</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#constructor_jindo.DropArea" class="name">jindo.DropArea</a>
(el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a> |  | document</span>, [htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])
 
						<p><p>DropArea 컴포넌트를 생성한다.</p></p>
					</td>
					<td>jindo.DropArea</td>
					</tr>
	            
			</tbody>
			</table>
		

        

        
			<h2 class="noline">메서드</h2>
			
			<table class="tbl_board">
			<caption class="hide">메서드</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">메서드</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_attach" class="name">attach</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToAttach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.DropArea.html" class="crosslink">jindo.DropArea</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>커스텀 이벤트 핸들러를 등록한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_detach" class="name">detach</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToDetach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.DropArea.html" class="crosslink">jindo.DropArea</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>커스텀 이벤트 핸들러를 해제한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_detachAll" class="name">detachAll</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="..\classes\jindo.DropArea.html" class="crosslink">jindo.DropArea</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>등록된 모든 커스텀 이벤트 핸들러를 해제한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_fireEvent" class="name">fireEvent</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, oEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>이벤트를 발생시킨다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getOveredLists" class="name">getOveredLists</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a>
 
						<p><p>Drag되고 있는 채, 마우스가 올라간 엘리먼트의 리스트를 구함</p></p>
					</td>
					<td>jindo.DropArea</td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_option" class="name">option</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>옵션 값을 가져온다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_optionSetter" class="name">optionSetter</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>옵션의 setter 함수를 가져온다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
			</tbody>
			</table>
        

        
			<h2 class="noline">이벤트</h2>
			
			<table class="tbl_board">
			<caption class="hide">이벤트</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">이벤트</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_dragEnd" class="name">dragEnd</a>
						<p><p>oDragInstance의 dragEnd 이벤트에 연이어 발생</p></p>
					</td>
					<td>jindo.DropArea</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_dragStart" class="name">dragStart</a>
						<p><p>oDragInstance의 dragStart 이벤트에 연이어 발생</p></p>
					</td>
					<td>jindo.DropArea</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_drop" class="name">drop</a>
						<p><p>Drop 가능한 엘리먼트에 성공적으로 드랍 될 경우 발생</p></p>
					</td>
					<td>jindo.DropArea</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_move" class="name">move</a>
						<p><p>Drag된 채 Drop 가능한 엘리먼트위에서 마우스 커서가 움직일 경우 발생</p></p>
					</td>
					<td>jindo.DropArea</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_out" class="name">out</a>
						<p><p>Drag된 채 Drop 가능한 엘리먼트에서 마우스 커서가 벗어날 경우 발생</p></p>
					</td>
					<td>jindo.DropArea</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_over" class="name">over</a>
						<p><p>Drag된 채 Drop 가능한 엘리먼트에 마우스 커서가 올라갈 경우 발생</p></p>
					</td>
					<td>jindo.DropArea</td>
					</tr>
	            
			</tbody>
			</table>
        			
	</div>

    
        <div class="tc-panel">
			<h2 id="manual">매뉴얼</h2>
            
				<div id="manual_6a586bd6ae227a6ba2d98c96e8b06af1" class="manual item">
				    <h3>기능과 동작 방식</h3>
				    <div class="description"><p>DropArea컴포넌트는 DragArea 컴포넌트로 드래그된 엘리먼트가 드랍되었을 때 지정한 동작을 수행할 수 있도록 도와주는 컴포넌트다.
DropArea 컴포넌트는 단독으로 사용할 수 없고, DragArea 컴포넌트와 함께 Drag&amp;Drop을 기능을 완성한다. 따라서 이 컴포넌트를 제대로 사용하기 위해서는 DragArea 컴포넌트의 이해가 반드시 필요하다.</p>

<p>DropArea는 드래그한 엘리먼트가 드랍할 영역위로 올라왔을 때, 추가적인 작업을 할수있도록 지원하고, 드래그한 엘리먼트가 마우스 포인터와 중첩되어 마우스 이벤트를 받을수 없는 경우에도 포인터의 위치를 계산해서 드랍할 영역에 커스텀 이벤트를 발생시켜 준다. 
DropArea는 아래 그림과 같이 드래그가 전제되었다고 가정하기 때문에 다른 컴포넌트에 비해 조금 까다롭다. 즉, DragArea 인스턴스와 DropArea 인스턴스를 동시에 핸들링 해야하고 아래와 같이 여러개의 엘리먼트를 핸들링해야한다. </p>

<p><img src="..\..\..\resource/jindo.DropArea/Basic.png" alt="" title="" /></p>

<h2>Drop 영역이 활성화 되는 시점</h2>

<p>드래그된 엘리먼트를 드랍하기 위해서는 마우스 포인터가 어느 위치에 있느냐가 매우 중요하다. 아래 그림처럼 드래그 중인 엘리먼트와 마우스 포인터가 중첩이 되어 있는 상황에서는 드랍영역에 마우스 이벤트가 전달되지 않기 때문에 드래그 이동중일때, 마우스 포인터를 기준으로 좌표계산을 하게 된다. 즉, Drop 영역을 먼저 찾고 현재 마우스 포인터가 찾은 Drop 영역안에 있는지 계산한다. 이때 마우스 포인터가 영역 안에 있다면, 해당 Drop 영역에 커스텀 이벤트를 발생시켜준다.</p>

<h5>마우스포인터와 Drag 엘리먼트가 중첩되는 상황</h5>

<p><img src="..\..\..\resource/jindo.DropArea/Activation.png" alt="" title="" /></p>

<p>아래 그림과 같이 Drop 영역이 여러개 겹쳐 있을수도 있다. 이때도 마찬가지로 모든 Drop 영역을 찾아 배열에 넣고, 하나씩 포인터가 해당 영역에 있는지 검사를 하기때문에 Drop 영역이 여러개 선택될수 있다.</p>

<h5>마우스포인터와 Drag 엘리먼트, 그리고 Drop 영역이 여러개 중첩되는 상황</h5>

<p><img src="..\..\..\resource/jindo.DropArea/Activation1-1.png" alt="" title="" /></p>

<p>하지만, 위의 두번째 그림처럼 Drop 영역이 여러개 활성화 되어버리면 정확히 어느지점에 드래그한 엘리먼트를 드랍해야하는지 선택해야한다. 때문에 아래 그림과 같이 드래그된 엘리먼트와 마우스포인터를 분리하여 직접 Drop 영역을 포인팅하도록 지정할 수도 있다. (참고로 네이버 메일의 경우, 후자의 방법을 사용한다.)</p>

<h5>Drag 엘리먼트와 중첩되는 상황을 피하기 위해, 마우스 포인터를 drag엘리먼트의 좌상단에 지정</h5>

<p><img src="..\..\..\resource/jindo.DropArea/Activation2.png" alt="" title="" /></p>

<h4>DropArea 초기화하기</h4>

<p>간단한 기능확인을 위해 아래와 같이 드래그할 영역과 드랍할 영역 정해 HTML/CSS를 구성했다.
파란색과 빨간색 박스를 드래그해서, 오른쪽 드랍존에 떨어트리면, 해당 색으로 변경되는 간단한 예제이다.</p>

<p><img src="..\..\..\resource/jindo.DropArea/Example.png" alt="" title="" /></p>

<pre class="code"><code class="prettyprint">&lt;div class="closehand" id="bar"&gt; 
    &lt;div class="draggable" id="bar_sub1"&gt;#00f&lt;/div&gt; 
    &lt;div class="draggable" id="bar_sub2"&gt;#f00&lt;/div&gt; 
&lt;/div&gt;
&lt;div class="droppable"&gt;&lt;/div&gt;

* { margin:0; padding:0; cursor:default; }
div { border:1px solid #000; }
#bar { width:400px; height:200px; left:50px; top:50px; padding:10px; }
#bar_sub1 { width:50px; height:50px; background-color:blue; left:15px; top:15px; z-index:10 }
#bar_sub2 { width:50px; height:50px; background-color:red; left:15px; top:90px; z-index:10}
.draggable { padding:10px;position:absolute; background-color:#ffd; cursor:url('http://static.naver.com/maps2/openhand.cur'), move; }
.droppable { position:absolute; width:190px; height:180px; top:20; left:200; background-color:white; z-index:0}

// Javascript
var oDragArea, oDropArea;
window.onload = function() {
    oDragArea = new jindo.DragArea(document);
    oDropArea = new jindo.DropArea(document, {oDragInstance:oDragArea}).attach({
        over : function(oCustomEvent) {
            oCustomEvent.elDrop.style.backgroundColor = oCustomEvent.elDrag.innerHTML;
        },
        out : function(oCustomEvent){
            oCustomEvent.elDrop.style.backgroundColor = "#FFF";
        }
    });
}
</code></pre>

<p>DorpArea의 첫번째 인자는 Drop 기능이 동작하는 영역을 지정하기 때문에 일단은 Doucment 전체 영역으로 지정했다. Drop은 Drag를 전제로 하기 때문에 옵션 인자로 oDragInstance를 반드시 지정 해줘야한다. 위 코드를 실행해보면 over와 out이벤트 핸들러에서 정의한대로, 엘리먼트를 DropZone으로 드래그하면 색이 변하는것을 볼수있다.</p>

<h4>커스텀 이벤트 발생 순서</h4>

<p>아래 그림은 DropArea 컴포넌트의 커스텀이벤트 발생순서를 나타내고 있다. </p>

<p><img src="..\..\..\resource/jindo.DropArea/EventSequence.png" alt="" title="" /></p>

<p>빨간색 표시된 것은 DragArea의 커스텀이벤트인 것에 유의하자. 3~7번(5번제외)까지는 Drop 영역 위에서 발생하는 이벤트들로써, 이벤트 객체안에는 elDrop 엘리먼트가 모두 포함되어 있다. 자세한 내용은 커스텀이벤트 표를 확인하자.</p>

<h4>드래그 엘리먼트와 마우스 포인터가 중첩되는 상황을 피하는 방법</h4>

<p>Drag 기능은 기본적으로 엘리먼트를 잡고 움직이기 때문에 Drag엘리먼트와 Drop영역이 중첩되는 문제가 발생한다. 이 문제는 이미 Drop 영역이 활성화 되는 시점을 통해 알아보았다. 실제 구현은 다음과 같은 방법을 사용하였다.
 1. 먼저, 실제 움직일 가상 엘리먼트(phantom)를 숨겨둔다.
 2. 그리고 드래그가 시작(dragStart)될때, 드래그된 엘리먼트를 복사해 가상 엘리먼트에 넣고(innerHTML)
 3. 마우스 포인터 우하단의 상대적인 값을 구해, 가상 엘리먼트의 위치를 지정한다.
 4. 마지막으로 실제 움직일 엘리먼트(elDrag)에 가상 엘리먼트를 지정한다.
구현된 코드는 아래와 같다.</p>

<pre class="code"><code class="prettyprint">var oDragArea = new jindo.DragArea(document, { sClassName : 'draggable' }).attach({
    'dragStart' : function(oCustomEvent) {
        jindo.$Element(document.body).addClass('dragging');
        var oMousePos = oCustomEvent.weEvent.pos();

        // 가상 엘리먼트를 항상 마우스 커서 우측 하단에 붙도록 지정
        jindo.$Element('phantom').html(oCustomEvent.elDrag.innerHTML).show().offset(
                oMousePos.pageY + 10,
                oMousePos.pageX + 8
        );

        // 실제 움직이는 엘리먼트는 가상 엘리먼트로 지정
        oCustomEvent.elDrag = jindo.$('phantom');
    },
    'dragEnd' : function(oCustomEvent) {
        jindo.$Element(document.body).removeClass('dragging');
        jindo.$Element('phantom').hide();
    }
});

var oDropArea = new jindo.DropArea(document, { sClassName : 'droppable', oDragInstance : oDragArea }).attach({
    'over' : function(oCustomEvent) {
        jindo.$Element(oCustomEvent.elDrop).addClass('overed');
    },
    'out' : function(oCustomEvent) {
        jindo.$Element(oCustomEvent.elDrop).removeClass('overed');
    },
    'dragEnd' : function(oCustomEvent) {
        if (oCustomEvent.aDrop.length) {
            jindo.$ElementList(oCustomEvent.aDrop).removeClass('overed');                  
        }  
    }
});
</code></pre></div>
				</div>
            
				<div id="manual_cbd30bb38edc7ffc879aabd5f479a2c7" class="manual item">
				    <h3>기본 초기화 형태</h3>
				    <div class="description"><h4>HTML</h4>

<pre class="code"><code class="prettyprint">&lt;div class="droppable"&gt;&lt;/div&gt;
&lt;div class="draggable"&gt;Drag me&lt;/div&gt;
</code></pre>

<h4>CSS</h4>

<pre class="code"><code class="prettyprint">.draggable { position:absolute; width:50px; height:50px; background-color:#ccc; left:50px; top:50px; padding:10px; border:1px solid #000; cursor:move; }
.droppable { position:absolute; background-color:#999; padding:10px; width:150px; height:150px; left:250px; top:50px; border: solid 4px #444; }
.overed { background-color:#0075c8; }
</code></pre>

<h2>Javascript</h2>

<pre class="code"><code class="prettyprint">var oDragArea = new jindo.DragArea(document, { sClassName : 'draggable' });
var oDropArea = new jindo.DropArea(document, { sClassName : 'droppable', oDragInstance : oDragArea }).attach({
    'over' : function(oCustomEvent) {
        jindo.$Element(oCustomEvent.elDrop).addClass('overed');
    },
    'move' : function(oCustomEvent) {
        oCustomEvent.elDrop.innerHTML = "내부 좌우비율:" + oCustomEvent.nRatioX.toFixed(2) + ' &lt;br/&gt;내부 상하비율:' + oCustomEvent.nRatioY.toFixed(2);
    },
    'out' : function(oCustomEvent) {
        jindo.$Element(oCustomEvent.elDrop).removeClass('overed').html("");
    },
    'dragEnd' : function(oCustomEvent) {
        if (oCustomEvent.aDrop.length) {
            jindo.$ElementList(oCustomEvent.aDrop).removeClass('overed');                  
        }  
    }
});
</code></pre></div>
				</div>
            
        </div>
    

	
		<div class="tc-panel">
			<h2 id="constructor">생성자 세부 정보</h2>
	        
	            <div id="constructor_jindo.DropArea" class="constructor item">
	<h3>jindo.DropArea()
		<span>생성자</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DropArea.js.html#l20" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>new jindo.DropArea
(el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a> |  | document</span>, [htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])</code></div>
	<div class="description"><p>DropArea 컴포넌트를 생성한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">el</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a> |  | document</span>
    

    

    <p class="description">Drop될 엘리먼트들의 상위 기준 엘리먼트. 컴포넌트가 적용되는 영역(Area)이 된다.</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name optional">htOption</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">옵션 객체</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">oDragInstance</code>
        <span class="type">: <a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a></span>
    

    

    <p class="description">Drop이 될 대상인 DragArea 컴포넌트의 인스턴스 (필수지정)</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name optional">sClassName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
        <span class="default">(기본값 : &quot;droppable&quot;)</span>
    

    

    <p class="description">드랍가능한 엘리먼트의 클래스명. 상위 기준 엘리먼트의 자식 중 해당 클래스명을 가진 모든 엘리먼트는 드랍가능하게 된다.</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">var oDropArea = new jindo.DropArea(document, { 
    sClassName : 'dropable', // (String) 상위 기준 엘리먼트의 자식 중 해당 클래스명을 가진 모든 엘리먼트는 Drop 가능하게 된다. 
    oDragInstance : oDragArea // (jindo.DragArea) Drop이 될 대상인 DragArea 컴포넌트의 인스턴스
}).attach({
    dragStart : function(oCustomEvent) {
        //oDragInstance의 dragStart 이벤트에 연이어 발생
        //전달되는 이벤트 객체 oCustomEvent = {
        //  elArea : (HTMLElement) 기준 엘리먼트
        //  elHandle : (HTMLElement) 옵션의 className으로 설정된 드래그 될 핸들 엘리먼트 (mousedown된 엘리먼트)
        //  elDrag : (HTMLElement) 실제로 드래그 될 엘리먼트 (핸들을 드래그하여 레이어 전체를 드래그되도록 하고 싶으면 이 값을 설정한다. 아래 예제코드 참고)
        //  htDiff : (HashTable) handledown된 좌표와 dragstart된 좌표의 차이 htDiff.nPageX, htDiff.nPageY
        //  weEvent : (jindo.$Event) 마우스 이동 중 발생되는 jindo.$Event 객체
        //};
    },
    over : function(oCustomEvent) {
        //Drag된 채 Drop 가능한 엘리먼트에 마우스 커서가 올라갈 경우 발생
        //전달되는 이벤트 객체 oCustomEvent = {
        //  elHandle : (HTMLElement) Drag하기위한 이벤트를 받은 핸들 엘리먼트
        //  elDrag : (HTMLElement) 실제 Drag 된 엘리먼트 
        //  elDrop : (HTMLElement) Drop 될 대상 엘리먼트
        //}
    },
    move : function(oCustomEvent) {
        //Drag된 채 Drop 가능한 엘리먼트위에서 마우스 커서가 움직일 경우 발생
        //전달되는 이벤트 객체 oCustomEvent = {
        //  weEvent : (jindo.$Event) 마우스 이동시 발생하는 jindo의 jindo.$Event 객체
        //  elHandle : (HTMLElement) Drag하기위한 이벤트를 받은 핸들 엘리먼트
        //  elDrag : (HTMLElement) 실제 Drag 된 엘리먼트 
        //  elDrop : (HTMLElement) Drop 될 대상 엘리먼트
        //  nRatioX : (Number) 드랍될 엘리먼트 내부의 좌우비율
        //  nRatioY : (Number) 드랍될 엘리먼트 내부의 상하비율
        //}
    },
    out : function(oCustomEvent) {
        //Drag된 채 Drop 가능한 엘리먼트에서 마우스 커서가 벗어날 경우 발생
        //전달되는 이벤트 객체 oCustomEvent = {
        //  elHandle : (HTMLElement) Drag하기위한 이벤트를 받은 핸들 엘리먼트
        //  elDrag : (HTMLElement) 실제 Drag 된 엘리먼트 
        //  elDrop : (HTMLElement) Drop 될 엘리먼트
        //}
    }, 
    drop : function(oCustomEvent) {
        //Drop 가능한 엘리먼트에 성공적으로 드랍 될 경우 발생
        //전달되는 이벤트 객체 oCustomEvent = {
        //  elHandle : (HTMLElement) Drag하기위한 이벤트를 받은 핸들 엘리먼트
        //  elDrag : (HTMLElement) 실제 Drag 된 엘리먼트 
        //  elDrop : (HTMLElement) Drop 될 대상 엘리먼트
        //  weEvent : (jindo.$Event) mouseup시 발생되는 jindo.$Event 객체 
        //}
    },
    dragEnd : function(oCustomEvent) {
        //oDragInstance의 dragEnd 이벤트에 연이어 발생
        //전달되는 이벤트 객체 oCustomEvent = {
        //  elArea : (HTMLElement) 기준 엘리먼트
        //  elHandle : (HTMLElement) 옵션의 className으로 설정된 드래그 될 핸들 엘리먼트 (mousedown된 엘리먼트)
        //  elDrag : (HTMLElement) 실제로 드래그 된 엘리먼트
        //  aDrop : (Array) Drop 될 대상 엘리먼트의 배열
        //  nX : (Number) 드래그 된 x좌표.
        //  nY : (Number) 드래그 된 y좌표.
        //}
    }
});
</code></pre>
            </div>
        </div>
    
    
    
    
    

    

</div>

<!--
	
-->
	        
	    </div>
    

	
	
	
		<div class="tc-panel">
			<h2 id="method">메서드 세부 정보</h2>
	        
	            
<div id="method_attach" class="method item inherited-item">
	<h3>attach()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l253" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>attach
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToAttach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.DropArea.html" class="crosslink">jindo.DropArea</a></code></div>
	<div class="description"><p>커스텀 이벤트 핸들러를 등록한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트 명</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">fHandlerToAttach</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">등록 할 커스텀 이벤트 핸들러</p>

	
	
    
        <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">oCustomEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">커스텀 이벤트 객체</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DropArea.html" class="crosslink">jindo.DropArea</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//이벤트 등록 방법 예제
//아래처럼 등록하면 appear 라는 사용자 이벤트 핸들러는 총 3개가 등록되어 해당 이벤트를 발생시키면 각각의 핸들러 함수가 모두 실행됨.
//attach 을 통해 등록할때는 이벤트명에 'on' 이 빠지는 것에 유의.
function fpHandler1(oEvent) { .... };
function fpHandler2(oEvent) { .... };

var oInst = new MyComponent();
oInst.onappear = fpHandler1; // 직접 등록
oInst.attach('appear', fpHandler1); // attach 함수를 통해 등록
oInst.attach({
    appear : fpHandler1,
    more : fpHandler2
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detach" class="method item inherited-item">
	<h3>detach()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l297" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detach
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToDetach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.DropArea.html" class="crosslink">jindo.DropArea</a></code></div>
	<div class="description"><p>커스텀 이벤트 핸들러를 해제한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트 명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">fHandlerToDetach</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">등록 해제 할 커스텀 이벤트 핸들러</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DropArea.html" class="crosslink">jindo.DropArea</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//이벤트 해제 예제
oInst.onappear = null; // 직접 해제
oInst.detach('appear', fpHandler1); // detach 함수를 통해 해제
oInst.detach({
    appear : fpHandler1,
    more : fpHandler2
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detachAll" class="method item inherited-item">
	<h3>detachAll()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l335" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detachAll
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="..\classes\jindo.DropArea.html" class="crosslink">jindo.DropArea</a></code></div>
	<div class="description"><p>등록된 모든 커스텀 이벤트 핸들러를 해제한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">이벤트명. 생략시 모든 등록된 커스텀 이벤트 핸들러를 해제한다.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DropArea.html" class="crosslink">jindo.DropArea</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//"show" 커스텀 이벤트 핸들러 모두 해제
oInst.detachAll("show");

//모든 커스텀 이벤트 핸들러 해제
oInst.detachAll();
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_fireEvent" class="method item inherited-item">
	<h3>fireEvent()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l180" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>fireEvent
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, oEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>이벤트를 발생시킨다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">oEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">커스텀 이벤트 핸들러에 전달되는 객체.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	<p class="description">핸들러의 커스텀 이벤트객체에서 stop메서드가 수행되면 false를 리턴</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//커스텀 이벤트를 발생시키는 예제
var MyComponent = jindo.$Class({
    method : function() {
        this.fireEvent('happened', {
            sHello : 'world',
            nAbc : 123
        });
    }
}).extend(jindo.Component);

var oInst = new MyComponent().attach({
    happened : function(oCustomEvent) {
        alert(oCustomEvent.sHello + '/' + oCustomEvent.nAbc); // 결과 : world/123
    }
});

&lt;button onclick="oInst.method();"&gt;Click me&lt;/button&gt; 
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getOveredLists" class="method item">
	<h3>getOveredLists()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DropArea.js.html#l285" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getOveredLists
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></code></div>
	<div class="description"><p>Drag되고 있는 채, 마우스가 올라간 엘리먼트의 리스트를 구함</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>
	<p class="description">겹쳐진 엘리먼트</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_option" class="method item inherited-item">
	<h3>option()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l33" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>option
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></code></div>
	<div class="description"><p>옵션 값을 가져온다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">옵션의 이름</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></span>
	<p class="description">옵션의 값</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_optionSetter" class="method item inherited-item">
	<h3>optionSetter()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l126" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>optionSetter
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></code></div>
	<div class="description"><p>옵션의 setter 함수를 가져온다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">setter의 이름</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
	<p class="description">setter 함수</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	    </div>
    
	
	
		<div class="tc-panel">
			<h2 id="event">이벤트 세부 정보</h2>
	        
	            <div id="event_dragEnd" class="event item">
	<h3>dragEnd
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DropArea.js.html#l152" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>oDragInstance의 dragEnd 이벤트에 연이어 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elArea</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">기준 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elHandle</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">옵션의 className으로 설정된 드래그 될 핸들 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDrag</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">실제로 드래그 된 엘리먼트커스텀</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">aDrop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>
    

    

    <p class="description">Drop 될 대상 엘리먼트의 배열</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nX</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">드래그 된 x좌표</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nY</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">드래그 된 y좌표</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// 커스텀 이벤트 핸들링 예제
oDropArea.attach("dragEnd", function(oCustomEvent) { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_dragStart" class="event item">
	<h3>dragStart
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DropArea.js.html#l119" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>oDragInstance의 dragStart 이벤트에 연이어 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elArea</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">기준 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elHandle</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">옵션의 className으로 설정된 드래그 될 핸들 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDrag</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">실제로 드래그 될 엘리먼트</p>

	
	
    
</li>

<li class="param collapsed ">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">htDiff</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">handledown된 좌표와 dragstart된 좌표의 차이</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">nPageX</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">가로 좌표</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nPageY</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">세로 좌표</p>

	
	
    
</li>

        </ul>
    
</li>

<li class="param  last">
    
    
        <code class="name">weEvent</code>
        <span class="type">: jindo.$Event</span>
    

    

    <p class="description">mousedown시 발생되는 jindo.$Event 객체</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// 커스텀 이벤트 핸들링 예제
oDropArea.attach("dragStart", function(oCustomEvent) { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_drop" class="event item">
	<h3>drop
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DropArea.js.html#l264" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>Drop 가능한 엘리먼트에 성공적으로 드랍 될 경우 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elHandle</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">옵션의 className으로 설정된 드래그 될 핸들 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDrag</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">실제로 드래그 될 엘리먼트</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">elDrop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">Drop 될 대상 엘리먼트</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// 커스텀 이벤트 핸들링 예제
oDropArea.attach("drop", function(oCustomEvent) { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_move" class="event item">
	<h3>move
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DropArea.js.html#l207" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>Drag된 채 Drop 가능한 엘리먼트위에서 마우스 커서가 움직일 경우 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elHandle</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">옵션의 className으로 설정된 드래그 될 핸들 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDrag</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">실제로 드래그 될 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDrop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">Drop 될 대상 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nRatioX</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">드랍될 엘리먼트 내부의 좌우비율</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nRatioY</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">드랍될 엘리먼트 내부의 상하비율</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">weEvent</code>
        <span class="type">: jindo.$Event</span>
    

    

    <p class="description">mousedown시 발생되는 jindo.$Event 객체</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// 커스텀 이벤트 핸들링 예제
oDropArea.attach("move", function(oCustomEvent) { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_out" class="event item">
	<h3>out
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DropArea.js.html#l236" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>Drag된 채 Drop 가능한 엘리먼트에서 마우스 커서가 벗어날 경우 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elHandle</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">옵션의 className으로 설정된 드래그 될 핸들 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDrag</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">실제로 드래그 될 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDrop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">Drop 될 대상 엘리먼트</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">weEvent</code>
        <span class="type">: jindo.$Event</span>
    

    

    <p class="description">mousedown시 발생되는 jindo.$Event 객체</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// 커스텀 이벤트 핸들링 예제
oDropArea.attach("out", function(oCustomEvent) { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_over" class="event item">
	<h3>over
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DropArea.js.html#l184" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>Drag된 채 Drop 가능한 엘리먼트에 마우스 커서가 올라갈 경우 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elHandle</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">옵션의 className으로 설정된 드래그 될 핸들 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDrag</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">실제로 드래그 될 엘리먼트</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">elDrop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">Drop 될 대상 엘리먼트</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// 커스텀 이벤트 핸들링 예제
oDropArea.attach("over", function(oCustomEvent) { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	    </div>
    

    
        <div class="tc-panel">
			<h2 id="demo">데모</h2>
			<div class="demo">
				<ul class="demo_list" id="demo_list">
		            
		                <li><a href="../../../demo/jindo.DropArea/1. basic.html" id="demo_ab61a1d1ebd0e5f624cc27f6806ac9b8" title="가장&nbsp;기본적인&nbsp;사용&nbsp;예제입니다." target="_blank">기본&nbsp;에제</a></li>
		            
		                <li><a href="../../../demo/jindo.DropArea/2. pointing.html" id="demo_729bb79fc8e22520990dcac752b9a8ae" title="마우스&nbsp;포인터가&nbsp;직접&nbsp;드랍영역을&nbsp;가리킬&nbsp;수&nbsp;있는&nbsp;경우,&nbsp;드랍영역이&nbsp;겹친&nbsp;것과&nbsp;상관없이&nbsp;포인팅된&nbsp;드랍영역에만&nbsp;커스텀이벤트가&nbsp;발생하는&nbsp;예제입니다." target="_blank">중첩된&nbsp;드랍영역&nbsp;(포인팅&nbsp;가능)</a></li>
		            
		                <li><a href="../../../demo/jindo.DropArea/3. duplicate.html" id="demo_291e55648ae64b2df6d605bfbb407b95" title="마우스&nbsp;포인터가,&nbsp;드래그된&nbsp;엘리먼트에&nbsp;가려서&nbsp;드랍될&nbsp;영역을&nbsp;직접적으로&nbsp;가리킬&nbsp;수&nbsp;없고,&nbsp;드랍영역이&nbsp;겹쳐&nbsp;있을&nbsp;경우,&nbsp;마우스&nbsp;포인터의&nbsp;위치에&nbsp;따라&nbsp;Drop&nbsp;영역이&nbsp;여러개&nbsp;선택될&nbsp;수도&nbsp;있는&nbsp;예제입니다." target="_blank">중첩된&nbsp;드랍영역&nbsp;(포인팅&nbsp;불가)</a></li>
		            
		                <li><a href="../../../demo/jindo.DropArea/4. list.html" id="demo_23b353d47f03510ba8a9e2598fd66498" title="리스트&nbsp;목록&nbsp;사이사이를&nbsp;indicate&nbsp;영역으로&nbsp;표시하면서&nbsp;원하는&nbsp;위치로&nbsp;이동시는&nbsp;예제입니다." target="_blank">리스트&nbsp;순서를&nbsp;변경</a></li>
		            
		                <li><a href="../../../demo/jindo.DropArea/5. layout.html" id="demo_0538b7e83f8d275cb8b5ce5313b49cf6" title="레이아웃의&nbsp;위치를&nbsp;변경하는&nbsp;예제입니다." target="_blank">레이아웃&nbsp;위치&nbsp;변경</a></li>
		            
	            </ul>
				<div class="demo_example" id="demo_example">
					<div class="clipboard" style="display:block">
						<p class="description" id="demo_desc"></p>
						<iframe src="about:blank" id="demo_iframe" name="demo_iframe" width="100%" height="366" frameborder="0"></iframe>
					</div>
				</div>
				<button type="button" id="btn_external" class="btn_external">새창으로 열기</button>
			</div>
        </div>
    
	    
	
	
	<div class="btn_top" id="btn_top">
		<a title="맨위로" href="#"><span class="blind">맨위로</span></a>
	</div>	

</div>
<!-- // content -->

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>